<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/wyrd.css">
		<title>Document</title>
	</head>

	<body>
		<div id="abc" class="abc">
			<button @click="a+=1">切换显示状态</button>
			<button @click="age+=1">增加年龄</button>
			<button @click="age-=1">减小年龄</button>
			<h2><span>第二张图片大于18可以看，目前年龄：</span>{{age}}</h2>
			<img src="img/17.jpg" alt="" v-if="a%2==0">
			<img src="img/18.jpg" alt="" v-if="age>=18">
		</div>
	</body>
	<script src="https://unpkg.com/vue@next"></script>
	<script>
		const Abc = {
			data() {
				return {
					age: 15,
					a: 1
				}
			}
		}
		Vue.createApp(Abc).mount('#abc')
	</script>

</html>